<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div::before{
             display: block;
             content: " ";
             float: left;
             background-color: red;
             width: 30px;
             height: 10px;
        }
        p{
            white-space: pre-wrap;
        }
        p::first-line{
            background-color: red;
        }
        p::first-letter{
            color: blueviolet;
        }
    </style>
</head>
<body>
  <!--
     css3新增加的选择器
     （1）伪类选择器：    使用的时候有一个冒号
     （2）伪元素选择器：  使用的时候有两个冒号,使用一个冒号也是允许的
            before  after   first-line   first-letter
      before  after使用的时候必须设置content属性

  -->
     <div>你好，世界</div>
      <p>ssssssssssssssssssssssssssssssssssssssss
      ppppppppppppppppppppppppppppppppppppppppp
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
      lllllllllllllllllllllllllllllllllll</p>
</body>
</html>